'use client';
import { TexRes } from '@/types/interface';
import { useState } from 'react';

// 左箭头图标
const CaretLeftIcon = () => (
  <svg className="w-5 h-5 text-gray-600 hover:text-cyan-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
  </svg>
);

// 右箭头图标
const CaretRightIcon = () => (
  <svg className="w-5 h-5 text-gray-600 hover:text-cyan-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
  </svg>
);

// 上传图标 (虽然在当前代码中没有使用，但保持与原导入一致)
const UploadIcon = () => (
  <svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
  </svg>
);

interface Props {
	list: TexRes[];
}
const StepContainer: React.FC<Props> = ({ list }) => {
	const [index, setIndex] = useState(list.length - 1);
	return (
		<div className="pl-3 sm:pl-5 relative item-container">
			{list.map((val, i) => (
				<div className={index == i ? 'show' : 'hidden'} key={val.id}>
					<b>{val.model}</b>
					{val.description}
				</div>
			))}
			{list.length > 1 ? (
				<div className="absolute bottom-2 right-2 sm:right-5 sm:bottom-0 flex items-center gap-2">
					<button
						onClick={() => {
							if (index == 0) return;
							setIndex(index - 1);
						}}
						disabled={index == 0}
						className="p-2 rounded-full hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
						aria-label="上一步"
					>
						<CaretLeftIcon />
					</button>
					<span className="text-sm text-gray-600">{index + 1}/{list.length}</span>
					<button
						onClick={() => {
							if (index == list.length - 1) return;
							setIndex(index + 1);
						}}
						disabled={index == list.length - 1}
						className="p-2 rounded-full hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
						aria-label="下一步"
					>
						<CaretRightIcon />
					</button>
				</div>
			) : null}
		</div>
	);
};

export default StepContainer;
